<template>
    <div>
		<h3>{{props.title}}</h3>
        <el-form :model="form">
            <el-form-item label="名称">
                <el-input v-model="music.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="歌手">
                <el-input v-model="music.artistsname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="音乐地址">
                <el-input v-model="music.url" autocomplete="off" />
            </el-form-item>
            <el-form-item label="专辑封面">
                <el-input v-model="music.picurl" autocomplete="off" />
            </el-form-item>
        </el-form>

        <div class="dialog-footer">
            <el-button type="primary" @click="doSubmit">
                提交
            </el-button>
			
			<el-button type="primary" @click="doSubmit1">
			    提交2
			</el-button>
        </div>




    </div>



</template>
<script setup>
import  {ref} from   'vue'

import { ElMessage } from 'element-plus'

//自定義屬性
const props = defineProps(['title'])


const music = ref({
  id:'',
  name: '',
  artistsname: '',
  url: '',
  picurl: ''
})
//定义子组件可以注册的方法 
const  emit   = defineEmits(['onClose'])

const doSubmit = () => {

  fetch("http://localhost:3000/musics",
    {
      method: 'post',
      body: JSON.stringify(music.value)

    })
    .then(res => res.json()).then((result) => {
      ElMessage.success('操作成功')
      //向父组件发送事件
        emit("onClose","你好，我已经完事了")
    })

}

const  doSubmit1 =()=>{
	
		
}


const   doMyEdit =(id)=>{
      fetch("http://localhost:3000/musics/"+id)
        .then(res => res.json()).then((result) => {
         music.value =result;
     })

}

//暴漏接口方法 
defineExpose({doMyEdit   ,doSubmit1})



</script>